@import "@/assets/css/common.scss";
.all {
  @include background_color("background_color");
  padding: 0 0.25rem;
  .more-bottom {
    padding: 0.15rem 0;
    border-top: 1px solid #ebeef5;
    @include border_color("border-color");
    font-size: 0.32rem;
    text-align: center;
    color: #909399;
    display: flex;
    align-items: center;
    justify-content: center;
    .icon-qianjin1 {
      font-size: 0.34rem;
      // vertical-align: middle;
    }
  }
  &-singersong {
    padding: 0.1rem 0;
    border-radius: 0.25rem;
    @include background_color("secondary-bg");
    @include font_color("text-color");
    margin-top: 0.25rem;
    &-music {
      flex: 1;
      &-name {
        font-size: 0.4rem;
        line-height: 0.5rem;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: break-all;
      }
      &-author {
        font-size: 0.32rem;
        color: #909399;
        margin-top: 0.1rem;
        line-height: 0.35rem;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      &-video {
        margin-right: 0.45rem;
        font-size: 0.5rem !important;
      }
      &-more {
        font-size: 0.45rem !important;
        margin-right: 0.1rem;
      }
    }
    &-cell {
      border-top: 1px solid #ebeef5;
      padding: 0.25rem 0;
      margin: 0 0.25rem;
      @include border_color("border-color");
      @include background_color("secondary-bg");
    }
  }
  &-sheet {
    padding: 0.1rem 0;
    border-radius: 0.25rem;
    @include background_color("secondary-bg");

    margin-top: 0.25rem;
    &-item {
      padding: 0.1rem 0;
      margin: 0 0.25rem;
      display: flex;
      align-items: center;
      &-cover {
        width: 1.3rem;
        height: 1.3rem;
        border-radius: 0.2rem;
        margin-right: 0.3rem;
      }
      &-body {
        font-size: 0.32rem;
        color: #909399;

        .item-body-name {
          @include font_color("text-color");
          @include font_color("text-color");
          font-size: 0.38rem;
          // transform: scaleY(1.05);
          zoom: 1.1;
          letter-spacing: 1px;
          font-weight: 500;
          line-height: 0.5rem;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
        .item-body-info,
        .item-body-other {
          font-size: 0.32rem;
          font-weight: 500;
          // line-height: 0.42rem;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
          &-color {
            color: #6383af;
          }
        }
      }
    }
    .more-bottom {
      margin-top: 0.25rem;
    }
  }
  &-video {
    padding: 0.1rem 0;
    border-radius: 0.25rem;
    @include background_color("secondary-bg");
    margin-top: 0.25rem;
    .video-item {
      padding: 0.1rem 0;
      margin: 0 0.25rem;
      display: flex;
      align-items: center;
      &-cover {
        width: 2.4rem;
        height: 1.6rem;
        border-radius: 0.2rem;
        margin-right: 0.3rem;
        position: relative;
        &-img {
          width: 2.4rem;
          height: 1.6rem;
          border-radius: 0.2rem;
        }
        .icon-Controls-71 {
          font-size: 0.48rem;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          color: #f4f4f5;
          opacity: 0.5;
          zoom: 1.2;
        }
      }
      &-body {
        font-size: 0.32rem;
        color: #909399;
        &-name {
          @include font_color("text-color");
          font-size: 0.38rem;
          // transform: scaleY(1.05);
          zoom: 1.1;
          letter-spacing: 1px;
          font-weight: 500;
          line-height: 0.5rem;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
      }
    }
    .more-bottom {
      margin-top: 0.25rem;
    }
  }
  &-singer {
    padding: 0.1rem 0;
    border-radius: 0.25rem;
    @include background_color("secondary-bg");
    margin-top: 0.25rem;
    .singer-item {
      &-cover {
        width: 1.2rem;
        height: 1.2rem;
        border-radius: 50%;
        margin-right: 0.25rem;
      }
      &-name {
        @include font_color("text-color");
        font-size: 0.38rem;
        // transform: scaleY(1.05);
        zoom: 1.1;
        letter-spacing: 1px;
        font-weight: 500;
        line-height: 0.5rem;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      &-fans {
        color: #909399;
        font-size: 0.32rem;
        margin-top: 0.1rem;
      }
      &-btn {
        border: 1px solid #f1adab;
        border-radius: 999rem;
        padding: 0.08rem 0.2rem;
        font-size: 0.32rem;
        vertical-align: middle;
        color: #eb4d44;
        &-add {
          font-size: 0.32rem !important;
          // vertical-align: middle;
        }
      }
    }
    .cell-box {
      @include background_color("secondary-bg");
    }
  }
  &-ablm {
    padding: 0.1rem 0;
    border-radius: 0.25rem;
    @include background_color("secondary-bg");
    margin-top: 0.25rem;
    .ablm-item {
      &-cover {
        width: 1.2rem;
        height: 1.2rem;
        border-radius: 50%;
        margin-right: 0.25rem;
      }
      &-name {
        @include font_color("text-color");
        font-size: 0.38rem;
        // transform: scaleY(1.05);
        zoom: 1.1;
        letter-spacing: 1px;
        font-weight: 500;
        line-height: 0.5rem;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      &-info {
        color: #909399;
        font-size: 0.32rem;
        margin-top: 0.1rem;
      }
    }
    .cell-box {
      @include background_color("secondary-bg");
    }
  }
  &-qurey {
    padding: 0.1rem 0;
    border-radius: 0.25rem;
    @include background_color("secondary-bg");
    margin-top: 0.25rem;
    &-box {
      display: flex;
      flex-wrap: wrap;
      &-item {
        font-size: 0.32rem;
        padding: 0.15rem 0.25rem;
        background-color: #f1f1f1;
        color: #000;
        @include background_color("history");
        @include font_color("text-color");
        border-radius: 99rem;
        margin: 0.25rem 0.2rem;
      }
    }
  }
  &-user {
    padding: 0.1rem 0;
    border-radius: 0.25rem;
    @include background_color("secondary-bg");
    margin-top: 0.25rem;
    .user-item {
      &-cover {
        width: 1.2rem;
        height: 1.2rem;
        border-radius: 50%;
        margin-right: 0.25rem;
      }
      &-name {
        @include font_color("text-color");
        font-size: 0.38rem;
        // transform: scaleY(1.05);
        zoom: 1.1;
        letter-spacing: 1px;
        font-weight: 500;
        line-height: 0.5rem;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      &-fans {
        color: #909399;
        font-size: 0.32rem;
        margin-top: 0.1rem;
        line-height: 0.35rem;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      &-btn {
        border: 1px solid #f1adab;
        border-radius: 999rem;
        padding: 0.08rem 0.2rem;
        font-size: 0.32rem;
        vertical-align: middle;
        color: #eb4d44;
        &-add {
          font-size: 0.32rem !important;
          // vertical-align: middle;
        }
      }
    }
    .cell-box {
      @include background_color("secondary-bg");
    }
  }
}

.song {
  @include background_color("background_color");
  padding: 0 0.25rem;
  // position: relative;
  min-height: 100%;
  &-head {
    position: sticky;
    @include background_color("background_color");
    z-index: 1;
    top: 0;
    &-title {
      font-size: 0.42rem;
      font-weight: 600;
      margin-left: 0.2rem;
    }
    &-num {
      font-size: 0.25rem;
      font-weight: 600;
      color: #909399;
    }
    &-select {
      color: #000;
      font-size: 0.45rem !important;
      font-weight: 600;
    }
  }
  &-item {
    &-box {
      flex: 1;
      &-name {
        font-size: 0.4rem;
        line-height: 0.5rem;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      &-author {
        font-size: 0.32rem;
        color: #909399;
        margin-top: 0.1rem;
        line-height: 0.35rem;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    }
    &-video {
      margin-right: 0.45rem;
      font-size: 0.5rem !important;
    }
    &-more {
      font-size: 0.45rem !important;
      margin-right: 0.1rem;
    }
    .cell-box {
      @include border_color("border-color");
    }
  }
}

.sheet,
.musicword {
  @include background_color("background_color");
  padding: 0 0.25rem;
  // position: relative;
  min-height: 100%;
}
.video {
  @include background_color("background_color");
  padding: 0 0.25rem;
  // position: relative;
  min-height: 100%;
  .video-item {
    padding: 0.1rem 0;
    margin: 0 0.25rem;
    display: flex;
    align-items: center;
    &-cover {
      width: 2.4rem;
      height: 1.6rem;
      border-radius: 0.2rem;
      margin-right: 0.3rem;
      position: relative;
      &-img {
        width: 2.4rem;
        height: 1.6rem;
        border-radius: 0.2rem;
        filter: brightness(0.8);
      }
      .icon-Controls-71 {
        font-size: 0.48rem;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        color: #f4f4f5;
        opacity: 0.5;
        zoom: 1.2;
      }
    }
    &-body {
      font-size: 0.32rem;
      color: #909399;
      &-name {
        @include font_color("text-color");
        font-size: 0.38rem;
        // transform: scaleY(1.05);
        zoom: 1.1;
        letter-spacing: 1px;
        font-weight: 500;
        line-height: 0.5rem;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: break-all;
      }
      &-info {
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    }
  }
}

.singer {
  @include background_color("background_color");
  padding: 0 0.25rem;
  // position: relative;
  min-height: 100%;
  .singer-item {
    &-cover {
      width: 1.2rem;
      height: 1.2rem;
      border-radius: 50%;
      margin-right: 0.25rem;
    }
    &-name {
      @include font_color("text-color");
      font-size: 0.38rem;
      // transform: scaleY(1.05);
      zoom: 1.1;
      letter-spacing: 1px;
      font-weight: 500;
      line-height: 0.5rem;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    &-fans {
      color: #909399;
      font-size: 0.32rem;
      margin-top: 0.1rem;
    }
    &-btn {
      border: 1px solid #f1adab;
      border-radius: 999rem;
      padding: 0.08rem 0.2rem;
      font-size: 0.32rem;
      vertical-align: middle;
      color: #eb4d44;
      &-add {
        font-size: 0.32rem !important;
        // vertical-align: middle;
      }
    }
  }
}

.muser {
  @include background_color("background_color");
  padding: 0 0.25rem;
  min-height: 100%;
  .user-item {
    &-cover {
      width: 1.2rem;
      height: 1.2rem;
      border-radius: 50%;
      margin-right: 0.25rem;
    }
    &-name {
      @include font_color("text-color");
      font-size: 0.38rem;
      // transform: scaleY(1.05);
      zoom: 1.1;
      letter-spacing: 1px;
      font-weight: 500;
      line-height: 0.5rem;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    &-fans {
      color: #909399;
      font-size: 0.32rem;
      margin-top: 0.1rem;
      line-height: 0.35rem;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    &-btn {
      border: 1px solid #f1adab;
      border-radius: 999rem;
      padding: 0.08rem 0.2rem;
      font-size: 0.32rem;
      vertical-align: middle;
      color: #eb4d44;
      &-add {
        font-size: 0.32rem !important;
        // vertical-align: middle;
      }
    }
  }
}

.album {
  @include background_color("background_color");
  padding: 0 0.25rem;
  // position: relative;
  min-height: 100%;
  .album-item {
    &-cover {
      width: 1.2rem;
      height: 1.2rem;
      border-radius: 50%;
      margin-right: 0.25rem;
    }
    &-name {
      @include font_color("text-color");
      font-size: 0.38rem;
      // transform: scaleY(1.05);
      zoom: 1.1;
      letter-spacing: 1px;
      font-weight: 500;
      line-height: 0.5rem;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    &-info {
      color: #909399;
      font-size: 0.32rem;
      margin-top: 0.1rem;
    }
  }
}
